<template>
  <el-table
    :data="tableData"
    border
    class="marking-table"
    :cell-class-name="cellClassName"
    :header-cell-class-name="headerCellClassName"
    @cell-mouse-enter="cellMouseEnter"
    @cell-mouse-leave="cellMouseLeave"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      hoverRowIndex: null,
      hoverColumnIndex: null,
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.rowIndex = rowIndex;
      column.columnIndex = columnIndex;

      if (
        columnIndex === this.hoverColumnIndex &&
        rowIndex === this.hoverRowIndex
      ) {
        return "select-row select-column";
      } else if (rowIndex === this.hoverRowIndex) {
        return "select-row";
      } else if (columnIndex === this.hoverColumnIndex) {
        return "select-column";
      }
    },
    headerCellClassName({ columnIndex }) {
      if (columnIndex === this.hoverColumnIndex) {
        return "select-column";
      }
    },
    cellMouseEnter(row, column) {
      this.hoverRowIndex = row.rowIndex;
      this.hoverColumnIndex = column.columnIndex;
    },
    cellMouseLeave() {
      this.hoverRowIndex = null;
      this.hoverColumnIndex = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.marking-table {
  ::v-deep .el-table__header-wrapper {
    .el-table__header {
      th {
        &.select-column {
          border-right: 1px solid #1989ff;
        }
      }
    }
  }

  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      .el-table__row {
        td {
          &:hover {
            border: 1px solid #1989ff;
            background-color: rgba(#1989ff, 0.2);
          }

          &.select-row {
            border-bottom: 1px solid #1989ff;
          }

          &.select-column {
            border-right: 1px solid #1989ff;
          }
        }
      }
    }
  }
}
</style>
